大家好

今天要作的是裁切範圍
裁切範圍也包括一個很有趣的效果
就是用顏色或圖片填色的文字

先做裁切漸層文字

background: 
    -webkit-linear-gradient(top,#f82 0,#222 100%);
	/* 單色、漸層色，也可使用圖片 */
	-webkit-background-clip: text;
	/* 用文字作容器裁切背景，另外也可用 border-box | padding-box | content-box */
	-webkit-text-fill-color: transparent;
	/* 字體填入設定的 顏色 / 圖片 */

用這效果作出的標題可減少製作圖檔及出現圖片壓縮後的雜點

裁切範圍 ： border-box | padding-box | content-box

.border-box { background-clip: border-box; }

border-box 範圍在 border 外圍
border 的粗細會影響到裁切範圍

.padding-box { background-clip: padding-box; }

padding-box 範圍在 border 之內
依外框大小決定
不管 border 粗細和內文的多少

.content-box { background-clip: content-box; }

content-box 範圍是文字框
不論外框大小
範圍就只有文字的部分

--- 明日待續。